<template>
    <div class="absolute" :style="position">
        <img :src="keeperImg">
    </div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted } from 'vue';
import  keeperImg from '../../assets/keeper.png'
import { usePlayerStore } from '../../store/player'
import { usePosition } from '../../composables/usePosition';
import { useGameStore } from '../../store/game';

useMove()

function useMove() {
    const { 
        movePlayerToUp,
        movePlayerToDown,
        movePlayerToLeft,
        movePlayerToRight
     } = usePlayerStore()
     function handleKeyup(e:KeyboardEvent) {
        switch(e.code) {
            case 'ArrowUp':
            movePlayerToUp()
            break;
            case 'ArrowDown':
            movePlayerToDown()
            break;
            case 'ArrowLeft':
            movePlayerToLeft()
            break;
            case 'ArrowRight':
            movePlayerToRight()
            break;
        }
        detectionGameCompleted()
    }
    onMounted(() => {
        window.addEventListener("keyup",handleKeyup)
    })
    onUnmounted(() => {
        window.removeEventListener("keyup",handleKeyup)
    })
}

const { player } = usePlayerStore()
const { position }  = usePosition(player)
const { detectionGameCompleted } = useGameStore()


</script>
